<template>
  <div class="banner-add">

    <div class="createPost-main-container">
      <el-form ref="form" label-width="120px" :rules="rules" :model="form">
        <el-form-item v-for="(field, idx) in formField.items" :key="'item-'+idx" :label="field.fieldName">
          <el-input v-if="field.type === 'text'" v-model="form[field.field]" type="text" show-word-limit />
          <el-input v-if="field.type === 'number'" v-model="form[field.field]" type="number" show-word-limit />
        </el-form-item>
      </el-form>
    </div>

    <sticky :class-name="'cms-sub-navbar '+ajaxStatus">
      <el-button :loading="ajaxStatus" style="margin-left: 10px;" type="success" @click="submitForm('up')">
        发布
      </el-button>
      <el-button :loading="ajaxStatus" @click="reset()">
        取消
      </el-button>
    </sticky>

  </div>
</template>

<script>
import { getEditDataByScene, formInfo, postFormInfo } from '@/api/formConfig/index'
import Sticky from 'components/Sticky'
import { getAllNewsTypeLink } from '@/api/common'

export default {
  components: { Sticky },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    tabName: {
      type: String,
      default: ''
    }
  },
  data() {
    const checkDetails = (rule, value, callback) => {
      if (!this.form.details) {
        return callback(new Error('请填入资讯正文'))
      }
      callback()
    }
    return {
      ajaxStatus: false,
      form: {
      },
      rules: {
        title: { required: true, message: '请输入小于60个字的标题', trigger: 'blur', min: 1, max: 60 },
        summary: { required: true, message: '请输入小于200个字的资讯摘要', trigger: 'blur', min: 1, max: 200 },
        details: { required: true, validator: checkDetails }
      },
      formField: []
    }
  },
  computed: {
  },
  created() {
    if (this.isEdit) {
      const id = this.$route.query && this.$route.query.id
      this.fetchData(id)
    }
    this.getTypeList()
    this.getFormProperties()
  },
  methods: {

    // 获取编辑数据
    fetchData(id) {
      formInfo({
        id,
        'scene': 'studentInfomation'
      }).then(re => {
        const { data } = re
        this.form = Object.assign(this.form, data)
      })
    },
    getTypeList() {
      getAllNewsTypeLink().then(re => {
        const { data } = re
        this.typeList = data
      })
    },
    getFormProperties() {
      getEditDataByScene('studentInfomation').then(r => {
        this.formField = r.data
      })
    },
    /**
     * 保存、发布接口
     *
     * id：保存为空，编辑传列表id
     */
    submitForm(status) {
      if (this.ajaxStatus) {
        return
      }
      this.ajaxStatus = true
      postFormInfo({
        sceneCode: 'studentInfomation',
        values: this.form
      })
        .then(() => {
          this.ajaxStatus = false
          this.reset()
        })
    },

    reset() {
      // 编辑发布后直接关闭tab跳转至列表页面
      if (+this.tabName > 2) {
        this.$emit('removeTab', this.tabName, '1')
        return
      }
      this.$refs['form'].resetFields()
      this.$emit('removeTab', this.tabName)
    }

  }
}
</script>
<style lang="scss" scoped>
.href-remark{
  color: #5e6d82;
  .red {
    background-color: #fdf6ec;
    color: #e6a23c;
  }
}
.logo-card{
  margin-bottom: 10px;
}
</style>

